﻿<%@ page language="java" pageEncoding="UTF-8"
		errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--此标签是告诉iphone的safari浏览器，这个网站对应的app是什么，然后在页面上面显示一个下载banner-->
    <meta name="apple-itunes-app" content="app-id=432274380">
    <!--   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->
    <meta name="description" content="" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>禅旅行</title>
     <%@include file="/ui/mobile/head.jsp"%>
    <script src="${cpath}/resources/mobile/js/masonry/jquery.masonry.min.js " type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <div class="page-top">
            <div class="page-top-left">
                <a href="${cpath}/mobile/home.do?action=navigate">
                    <img src="${cpath}/resources/mobile/img/icon/back.png" height="35" /></a>
            </div>
            <div class="page-top-center">
                风格偏好
            </div>
            
        </div>
        <div class="page-content">
            <div class="p-list" id="masonry">
            	<c:forEach var="item" items="${styleHomeList }">
	                <div class="p-item">
	                	<a href="${cpath}/mobile/home.do?action=listFeatureItems&pageNum=1&featureCategoryId=${item.featureCategoryId}">
	                    <img src="${image_domain }${item.styleOrigImg }" />
	                    <div class="p-item-title">
	                        <span class="p-item-title-cr"><c:choose>
									<c:when test="${item.styleCount > 99}">99</c:when>
									<c:otherwise>${item.styleCount}</c:otherwise>
								</c:choose>&nbsp;${item.featureCategoryName}</span>
									
	                    </div></a>
	                </div>
                </c:forEach>
                
            </div>
            
            <div class="clear">
            </div>
        </div>
        <script type="text/javascript">

            var $container = $('#masonry');
            $container.imagesLoaded(function () {
                $container.masonry({
                    // options 设置选项
                    itemSelector: '.p-item', //子类元素选择器
                    columnWidth: 145, //一列的宽度 ，包括边距 220+10+10
                    isAnimated: true, //使用jquery的布局变化，是否启用动画效果
                    animationOptions: {
                        //jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
                    },
                    gutterWidth: 10, //列的间隙

                    isResizableL: true, // 是否可调整大小
                    isRTL: false//使用从右到左的布局
                });
            });
        </script>
    </div>
    <%@include file="/ui/mobile/footer.jsp"%>
</body>
</html>
